<html>
<head>
	<meta charset="UTF-8"> 
	<!-- <meta http-equiv="refresh" content="0; url=http://www.nianxiaotu.com/api/fktt" />  -->
	<title>Minecraft 方块贴图</title>
	<link rel="shortcut icon" href="/favicon.ico" />
	<script type="text/vsh" id="drawv">
		attribute vec3 position;
		attribute vec3 normal;
		attribute vec2 textureCoord;

		uniform mat4 mvMatrix;
		uniform mat4 rtMatrix;
		uniform mat4 pMatrix;

		varying vec3 vNormal;
		varying vec2 vTextureCoord;

		void main(void) {
			gl_Position = pMatrix * mvMatrix * rtMatrix * vec4(position, 1.0);
			vNormal = normalize((rtMatrix * vec4(normal, 1.0)).xyz);
			vTextureCoord = textureCoord;
		}
	</script>
	<script type="text/fsh" id="drawf">
		precision mediump float;

		uniform sampler2D texture;
		uniform vec3 backColor;

		varying vec3 vNormal;
		varying vec2 vTextureCoord;

		void main(void) {
			vec4 color = texture2D(texture, vTextureCoord.st);
			vec3 normal = normalize(vNormal);
			vec3 light = normalize(vec3(-1, 1.732, 1));
			
			float lightWeight = dot(normal, light);
			if(lightWeight < 0.0)
				lightWeight = 0.0;

			lightWeight = 0.5 + 0.5 * lightWeight;

			gl_FragColor = vec4(backColor * color.rgb * lightWeight, color.a);
		}
	</script>
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="jquery.cookie.js"></script>
	<script type="text/javascript" src="Oak3D_v_0_5_9.js"></script>
	<script type="text/javascript" src="blockModel.js"></script>
	<script type="text/javascript" src="gllib.js"></script>
	<script type="text/javascript" src="presets.js"></script>
	<script type="text/javascript">
		var gl;

		function load() {
			loadPresets();
			loadModels();
			loadSaved();

			gl = loadGl('canvas');

			gl.enable(gl.DEPTH_TEST);
			gl.depthFunc(gl.LESS);
			
			gl.enable(gl.BLEND);
			gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

			gl.enable(gl.CULL_FACE);
			gl.cullFace(gl.BACK);
			
			gl.backColor = {};
			var colorstr = $.cookie("colorstr");
			if(colorstr == undefined) {
				colorstr = "FFFFFF";
			}
			$("#color-input").val(colorstr);
			$("#color-input").parent().children('span').css('background','#'+colorstr);
			changeColor(colorstr);
			
			var done = 0;

			loadShader(gl, "#drawv", "#drawf", function(sp) {
				gl.dsp = sp;

				gl.linkProgram(sp);
				if (!gl.getProgramParameter(sp, gl.LINK_STATUS)) {
					alert("Could not link shaders: \n" + gl.getProgramInfoLog(sp));
					return;
				}
				
				sp.position = gl.getAttribLocation(sp, "position");
				sp.textureCoord = gl.getAttribLocation(sp, "textureCoord");
				sp.normal = gl.getAttribLocation(sp, "normal");
				
				sp.mvMatrix = gl.getUniformLocation(sp, "mvMatrix");
				sp.rtMatrix = gl.getUniformLocation(sp, "rtMatrix");
				sp.pMatrix = gl.getUniformLocation(sp, "pMatrix");
				sp.texture = gl.getUniformLocation(sp, "texture");
				sp.backColor = gl.getUniformLocation(sp, "backColor");
				
				done |= 1;
				doneThen(done, 3, gl);
			});
			
			var themodel = models[$(".models").val()];
			if(!themodel) {
				themodel = models.cube;
			}
			themodel.textures = defaultTextures;
			
			loadModel(gl, themodel, function(lm) {
				gl.model = lm;
				themodel.textures = [];
			
				done |= 2;
				doneThen(done, 3, gl);
			});

		}
		
		function doneThen(done, max, gl) {
			if(done != max)
				return;
			
			var scene = {};
			
			scene.mvMat = okMat4Trans(0, -8*1.732/2, 0).toArray();
			scene.rtMat = okMat4RotY(45).rotX(OAK.SPACE_WORLD, 30).toArray();
			scene.pMat = okMat4Ortho(-13, 13, 13, -13, -20, 20).toArray();
			
			gl.scene = scene;

			draw(scene, gl);
		}
		
		function draw(scene, gl) {
			var sp2 = gl.dsp;
			gl.useProgram(sp2);

			drawModel(gl, gl.model, {
				position: sp2.position,
				normal: sp2.normal,
				textureCoord: sp2.textureCoord,
				texture: sp2.texture,
				otherActions: function(gl, texture, polyhedron) {
					var sp = gl.dsp;
					gl.uniform3f(sp.backColor, gl.backColor.r, gl.backColor.g, gl.backColor.b);
					gl.uniformMatrix4fv(sp.pMatrix, false, scene.pMat);
					gl.uniformMatrix4fv(sp.rtMatrix, false, scene.rtMat);
					gl.uniformMatrix4fv(sp.mvMatrix, false, scene.mvMat);
				}
			});
		}
		
		function loadPresets() {
			var optstr = "";
			for(var i=0; i<presets.length; i++) {
				optstr += "<option value='" + presets[i] + "'" + (presets[i] == "bedrock" ? "selected='true'" : "") + ">" + presets[i] + "</option>";
			}
			$(".presets").html(optstr);
		}
		
		function loadModels() {
			var optstr = "";
			for(var k in models) {
				optstr += "<option value='" + k + "'>" + k + "</option>";
			}
			$(".models").html(optstr);
		}
		
		function loadSaved() {
			if($.cookie("resultsize"))
				$("#size").val($.cookie("resultsize"));
			if($.cookie("selectedmodel"))
				$(".models").val($.cookie("selectedmodel"));
		}
		
		function changeModel(modelname) {
			$.cookie("selectedmodel", modelname);
			loadModel(gl, models[modelname], function(lm) {
				lm.textures = gl.model.textures;
				gl.model = lm;
				draw(gl.scene, gl);
			});
		}
		
		function changeColor(colorstr, repaint) {
			$.cookie("colorstr", colorstr);
			if(colorstr.length == 3) {
				gl.backColor.r = parseInt(colorstr[0], 16) / 15;
				gl.backColor.g = parseInt(colorstr[1], 16) / 15;
				gl.backColor.b = parseInt(colorstr[2], 16) / 15;
			} else if(colorstr.length == 6) {
				gl.backColor.r = parseInt(colorstr.substring(0, 2), 16) / 255;
				gl.backColor.g = parseInt(colorstr.substring(2, 4), 16) / 255;
				gl.backColor.b = parseInt(colorstr.substring(4, 6), 16) / 255;
			}
			if(repaint) {
				draw(gl.scene, gl);
			}
		}
		
		function changeTextureFromFile(o, i) {
			if(o.files.length < 0) {
				return;
			}
			
			var file = o.files[0];
			var reader = new FileReader(); 
			
			reader.onloadend = function() {
				if (reader.error) {
					alert("Error reading file.");
				} else {
					var s = reader.result;
					loadTexture(gl, {image:s, type:"solid", minFilter:"nearest", magFilter:"nearest"}, function(tx) {
						gl.model.textures[i] = tx;
						draw(gl.scene, gl);
					});
				}
			}

			reader.readAsDataURL(file);
		}
		
		function changeTextureFromPresets(o, i) {
			var s = "presets/" + $(o).val() + ".png";
			loadTexture(gl, {image:s, type:"solid", minFilter:"nearest", magFilter:"nearest"}, function(tx) {
				gl.model.textures[i] = tx;
				draw(gl.scene, gl);
			});
		}
		
		function changeTextureFromOther(i, f) {
			gl.model.textures[i] = gl.model.textures[f];
			draw(gl.scene, gl);
		}
		
		function getCanvasData() {
			var canvas = $("#canvas");
			var size = $("#size").val();
			canvas.attr("width", size);
			canvas.attr("height", size);
			draw(gl.scene, gl);
			var result = canvas.get(0).toDataURL("image/png");
			canvas.attr("width", "512");
			canvas.attr("height", "512");
			draw(gl.scene, gl);
			return result;
		}
		
		function output() {
			$("#result").get(0).href = getCanvasData();
		}
		
		function outputImage() {
			$('#result-img').get(0).src = getCanvasData();
		}
	</script>
</head>
<body>
	<h1>MC方块贴图在线生成.</h1>
	<canvas id="canvas" width="512" height="512" style="border:1px solid ccc;">
		您的浏览器不支持本功能！请更换其他浏览器.
	</canvas>
	<p>PS:这些贴图宽和高必须都是2的平方（例如16、32、64…）</p>
	<table>
	<tr>
		<td>模型:</td>
		<td><select class="models" onchange="changeModel($(this).val())"></select></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>颜色:</td>
		<td>
			<input type="input" id="color-input" value="FFFFFF" onkeyup="$(this).parent().children('span').css('background','#'+$(this).val())"/>
			<span style="display:block;float:left;width:20px;border:1px solid black;margin-top:3px">&nbsp;</span>
		</td>
		<td><a href="javascript:;" onclick="changeColor($('#color-input').val(),true)"><--选择该颜色</a></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>顶部:</td>
		<td><select class="presets" onchange="changeTextureFromPresets(this, 0);"></select></td>
		<td><input type="file" onchange="changeTextureFromFile(this, 0);" /></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>左侧:</td>
		<td><select class="presets" onchange="changeTextureFromPresets(this, 1);"></select></td>
		<td><input type="file" onchange="changeTextureFromFile(this, 1);" /></td>
		<td><a href="javascript:;" onclick="changeTextureFromOther(1, 0);" >与顶部相同</a></td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>右侧:</td>
		<td><select class="presets" onchange="changeTextureFromPresets(this, 2);" ></select></td>
		<td><input type="file" onchange="changeTextureFromFile(this, 2);" /></td>
		<td><a href="javascript:;" onclick="changeTextureFromOther(2, 0);" >与顶部相同</a></td>
		<td><a href="javascript:;" onclick="changeTextureFromOther(2, 1);" >与左侧相同</a></td>
	</tr>
	</table>
	<p>
		尺寸: 
		<select id="size" onchange="$.cookie('resultsize', $('#size').val())">
			<option value="512" selected="true">512</option>
			<option value="256">256</option>
			<option value="128">128</option>
			<option value="64">64</option>
			<option value="32">32</option>
		</select>
		<a id="result" download="result.png" onclick="output()" href="javascript:;" target="__blank" type="application/octet-stream" >保存图片</a>
		<a href="javascript:;" onclick="outputImage()" >渲染到下面的图片（用于IE11）</a>
	</p>
	<p><img id="result-img" /></p>
	<hr />
	<p>作者: Chaos</p>
	<p>翻译&美化: D布丁233</p>
	<p>E-Mail: <a href="mailto:buder233@163.com">buder233@163.com</a></p>
	<script type="text/javascript">
		try{load();}catch(e){alert(e.message);}
	</script>
	<script>
	alert('美化工作安排中！敬请期待！')
</script>
</body>
</html>
